import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Index",
    //路由模块懒加载，封装的独立的.js
    component: () => import("../views/Index.vue"),
    meta: {
      //固定属性名，用于指定当前路由的元数据
      title: "首页 — 小米购物商城", //元数据下的自定义属性
      keepAlive: true,
    },
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login.vue"),
    meta: {
      //固定属性名，用于指定当前路由的元数据
      title: "登录 — 小米购物商城", //元数据下的自定义属性
    },
  },
  {
    path: "/register",
    name: "Register",
    component: () => import("../views/Register.vue"),
    meta: {
      //固定属性名，用于指定当前路由的元数据
      title: "注册 — 小米购物商城", //元数据下的自定义属性
    },
  },
  {
    path: "/details",
    name: "Details",
    component: () => import("../views/Details.vue"),
    meta: {
      //固定属性名，用于指定当前路由的元数据
      title: "商品详情 — 小米购物商城", //元数据下的自定义属性
      keepAlive: false,
    },
  },
  {
    path: "/classify",
    name: "Classify",
    component: () => import("../views/Classify.vue"),
    meta: {
      //固定属性名，用于指定当前路由的元数据
      title: "商品分类 — 小米购物商城", //元数据下的自定义属性
    },
  },
  {
    path: "/cart",
    name: "Cart",
    component: () => import("../views/Cart.vue"),
    meta: {
      //固定属性名，用于指定当前路由的元数据
      title: "购物车 — 小米购物商城", //元数据下的自定义属性
    },
  }
];

const router = new VueRouter({
  mode: "history",
  routes,
});
//客户端每当访问一个路由地址时，就需要读取该路由对象的meta.title，设置为当前的document.title
router.beforeEach((to, from, next) => {
  //全局前置导航守卫
  if (to.meta && to.meta.title) {
    document.title = to.meta.title;
  }
  next(); //放行，继续执行后续路由组件
});
export default router;
